<template>

    <div class="toast"
         v-if="showToast">
        {{ message }}
    </div>

</template>

<script>
    export default {
        /**
         * 自己封装的Toast v0.2
         * params: showToast Boolean 是否激活toast 默认 false
         * params: type String       toast提示类型 共normal success，fail，warning 四个选项 默认normal
         * params: message String    toast消息
         * params: duration Number      toast显示时间 默认 3000ms
         * */
        data() {
            return {
                showToast: true,
                // type: "normal",
                message: "消息提示",
                duration: 3000
            }
        },
    }
</script>

<style scoped>
    .toast {
        position: fixed;
        left: 50%;
        top: 50%;
        background: rgba(0, 0, 0,.8);
        padding: 20px 30px;
        border-radius: 10px;
        transform: translate(-50%, -50%);
        animation: show-toast .2s;
        color: #fff;
        overflow: hidden;
        display: flex;
        align-items: center;
        font-size: 24px;
    }

    @keyframes show-toast {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

</style>
